// Effect: Slide from the top
.slide-in-top .effeckt-content {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
}
.effeckt-show.slide-in-top .effeckt-content {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

// Effect: Slide from the right
.slide-in-right .effeckt-content {
  transform: translate3d(30%, 0, 0);
  opacity: 0;
}
.effeckt-show.slide-in-right .effeckt-content {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

// Effect: Slide from the bottom
.slide-in-bottom .effeckt-content {
  transform: translate3d(0, 30%, 0);
  opacity: 0;
}
.effeckt-show.slide-in-bottom .effeckt-content {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

// Effect: Slide from the left
.slide-in-left .effeckt-content {
  transform: translate3d(-30%, 0, 0);
  opacity: 0;
}
.effeckt-show.slide-in-left .effeckt-content {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

// Effect: Stick Up
.sticky-up {
  top: 0;
  transform: translate(-50%, 0);
}
.sticky-up .effeckt-content {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
}
.effeckt-show.sticky-up .effeckt-content {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}


// Effect:  Slip in from the top with perspective on container
.slip-in-from-top ~ [data-effeckt-page],
.slip-in-from-top ~ .effeckt-overlay {
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
}
.slip-in-from-top .effeckt-content {
  transform: translateY(-200%);
  opacity: 0;
}
.effeckt-show.slip-in-from-top ~ [data-effeckt-page],
.effeckt-show.slip-in-from-top ~ .effeckt-overlay {
  animation: OpenTop $effeckt-modal-transition-duration forwards ease-in;
}
.effeckt-show.slip-in-from-top .effeckt-content {
  transform: translateY(0);
  opacity: 1;
}

@keyframes OpenTop {
  50% {
    transform: rotateX(10deg);
    animation-timing-function: ease-out;
  }
}

// Effeckt Out: Slide Out Bottom
.slide-out-bottom .effeckt-content {
  transform: translateY(100%);
  opacity: 0;
}

// Effeckt Out: Slide Out Top
.slide-out-top .effeckt-content {
  transform: translateY(-100%);
  opacity: 0;
}

// Effeckt Out: Slide Out Right
.slide-out-right .effeckt-content {
  transform: translateX(100%);
  opacity: 0;
}

// Effeckt Out: Slide Out Left
.slide-out-left .effeckt-content {
  transform: translateX(-100%);
  opacity: 0;
}
